<template>
  <div class="con table-gl-w">
    <div class="search-con search-w">
      <FilterTable :filterItem="filterItem" :isReset="true" :is-show-tag="true" @search="searchByVal" />
    </div>
    <div class="table-gl-con">
      <TableWrap style="flex: 1" @refresh="getList">
        <template #headerLeft></template>
        <template #tableBody>
          <a-table size="mini" class="table-singe-line" :bordered="{ cell: true }" v-model:selectedKeys="rowSelectList" @selection-change="selectColumn" @sorter-change="sortChange" row-key="id" :loading="loading" :summary="summary" :row-selection="rowSelection" :columns="columns" :data="tableList" :pagination="false" :scroll="{ x: '100%', y: '100%' }">
            <template #columns>
              <a-table-column title="序号" :width="60" fixed="left">
                <template #cell="{ record, rowIndex }">
                  {{ rowIndex + 1 }}
                </template>
              </a-table-column>
              <a-table-column title="仓库名称" :width="140" fixed="left">
                <template #cell="{ record, rowIndex }">
                  {{ record.warehouseName }}
                </template>
              </a-table-column>
              <a-table-column title="店铺" :width="140" fixed="left">
                <template #cell="{ record, rowIndex }">
                  {{ record.shopName }}
                </template>
              </a-table-column>
              <a-table-column title="货主" :width="100" #cell="{ record, rowIndex }" fixed="left"> {{ record.ownerName }} </a-table-column>
              <a-table-column title="图片" :width="60" fixed="left">
                <template #cell="{ record, rowIndex }">
                  <ImgPopover :src="record.productImg">
                    <template #con>
                      <a-image width="40" height="40" fit="contain" :src="record.productImg" />
                    </template>
                  </ImgPopover>
                </template>
              </a-table-column>
              <a-table-column title="产品名称/SKU" :width="120" fixed="left">
                <template #cell="{ record, rowIndex }">
                  <TextLimit :rows="1" :val="record.productName" />
                  <ShowSpuDetailBySku :val="record.sku" :showLimit="true" :rows="1" />
                </template>
              </a-table-column>
              <a-table-column title="MSKU/FNSKU" :width="140" fixed="left">
                <template #cell="{ record, rowIndex }">
                  <a-popover>
                    <p style="width: 100%" class="text-limit">{{ record.msku }}</p>
                    <p style="width: 100%" class="text-limit">{{ record.fnsku }}</p>
                    <template #content>
                      <p>{{ record.msku }}</p>
                      <p>{{ record.fnsku }}</p>
                    </template>
                  </a-popover>
                </template>
              </a-table-column>
              <a-table-column title="SPU/类目" :width="160">
                <template #cell="{ record, rowIndex }">
                  <a-popover>
                    <p style="width: 100%" class="text-limit">{{ record.spu ? record.spu : '' }}</p>
                    <p style="width: 100%" class="text-limit">{{ record.cateName }}</p>
                    <template #content>
                      <p>{{ record.spu ? record.spu : '' }}</p>
                      <p>{{ record.cateName }}</p>
                    </template>
                  </a-popover>
                </template>
              </a-table-column>
              <a-table-column title="库存属性" :width="80">
                <template #cell="{ record, rowIndex }">
                  {{ record.attribute == 'good' ? '良品' : '次品' }}
                </template>
              </a-table-column>
              <a-table-column title="初期库存" :width="120" data-index="beginAmt" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                <template #cell="{ record, rowIndex }">
                  {{ record.beginAmt }}
                </template>
              </a-table-column>
              <a-table-column title="初期单价" :width="120">
                <template #cell="{ record, rowIndex }">
                  {{ record.beginPrice }}
                </template>
              </a-table-column>
              <a-table-column title="初期货值" :width="120" data-index="beginValue" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                <template #cell="{ record, rowIndex }">
                  {{ record.beginValue }}
                </template>
              </a-table-column>

              <a-table-column title="采购入库" :width="140">
                <a-table-column title="数量" :width="70" data-index="purchaseInAmt" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                  <template #cell="{ record, rowIndex }">
                    {{ record.purchaseInAmt }}
                  </template>
                </a-table-column>
                <a-table-column title="货值" :width="70" data-index="purchaseInValue" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                  <template #cell="{ record, rowIndex }">
                    {{ record.purchaseInValue }}
                  </template>
                </a-table-column>
              </a-table-column>
              <a-table-column title="其他入库" :width="140">
                <a-table-column title="数量" :width="70" data-index="otherInAmt" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                  <template #cell="{ record, rowIndex }">
                    {{ record.otherInAmt }}
                  </template>
                </a-table-column>
                <a-table-column title="货值" :width="70" data-index="otherInValue" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                  <template #cell="{ record, rowIndex }">
                    {{ record.otherInValue }}
                  </template>
                </a-table-column>
              </a-table-column>
              <a-table-column title="销售出库" :width="140">
                <a-table-column title="数量" :width="70" data-index="salesOutAmt" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                  <template #cell="{ record, rowIndex }">
                    {{ record.salesOutAmt }}
                  </template>
                </a-table-column>
                <a-table-column title="货值" :width="70" data-index="salesOutAmtValue" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                  <template #cell="{ record, rowIndex }">
                    {{ record.salesOutAmtValue }}
                  </template>
                </a-table-column>
              </a-table-column>
              <a-table-column title="货件出库" :width="140">
                <a-table-column title="数量" :width="70" data-index="fbaOutAmt" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                  <template #cell="{ record, rowIndex }">
                    {{ record.fbaOutAmt }}
                  </template>
                </a-table-column>
                <a-table-column title="货值" :width="70" data-index="fbaOutValue" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                  <template #cell="{ record, rowIndex }">
                    {{ record.fbaOutValue }}
                  </template>
                </a-table-column>
              </a-table-column>
              <a-table-column title="其他出库" :width="140">
                <a-table-column title="数量" :width="70" data-index="otherOutAmt" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                  <template #cell="{ record, rowIndex }">
                    {{ record.otherOutAmt }}
                  </template>
                </a-table-column>
                <a-table-column title="货值" :width="70" data-index="otherOutValue" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                  <template #cell="{ record, rowIndex }">
                    {{ record.otherOutValue }}
                  </template>
                </a-table-column>
              </a-table-column>
              <a-table-column title="期末库存" :width="100" data-index="endAmt" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                <template #cell="{ record, rowIndex }">
                  {{ record.endAmt }}
                </template>
              </a-table-column>
              <a-table-column title="期末单价" :width="100" data-index="endPrice" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                <template #cell="{ record, rowIndex }">
                  {{ record.endPrice }}
                </template>
              </a-table-column>
              <a-table-column title="期末货值" :width="100" data-index="endValue" :sortable="{ sortDirections: ['ascend', 'descend'] }">
                <template #cell="{ record, rowIndex }">
                  {{ record.endValue }}
                </template>
              </a-table-column>
              <a-table-column title="操作" :width="60" fixed="right">
                <template #cell="{ record, rowIndex }">
                  <a-button type="text" size="mini" @click="show(record)">详情</a-button>
                </template>
              </a-table-column>
            </template>
            <!-- <template #summary-cell="{ column, record, rowIndex }">
              <div>{{ record[column.dataIndex] }}</div>
            </template> -->
          </a-table>
        </template>
      </TableWrap>
      <div class="pagination-footer">
        <a-pagination size="mini" :page-size-options="[20, 50, 100, 200, 500]" show-total show-page-size :total="pageNation.total" :default-page-size="pageNation.pageSize" :current="pageNation.pageNum" style="float: right" @page-size-change="sizeChange" @change="changePage" />
      </div>
    </div>
  </div>
  <ShowDetail ref="showDetail" :info="detailInfo" />
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs } from 'vue'
  import TableWrap from '@/components/TableWrap.vue'
  import FilterTable from '@/components/TableFilter.vue'
  import { findWarehouseListByParam, findShopListByShare } from '@/api/warehouse'
  import { findInventoryIoSumPage } from '@/api/inventory'
  import { getCategoryList } from '@/api/product'
  import { getOrganizesUser } from '@/api/system'
  import ShowDetail from './components/showDetailStatistic.vue'
  import _ from 'lodash-es'
  import dayjs from 'dayjs'
  export default defineComponent({
    components: { TableWrap, FilterTable, ShowDetail },
    setup() {
      const importInventory = ref()
      const setInventpryPrice = ref()
      const adjustSpace = ref()
      const showDetail = ref()
      const data: any = reactive({
        loading: false,
        tableList: [],
        filterItem: [
          {
            key: 'warehouseCodes',
            label: '仓库名称',
            value: ref(),
            type: 'select_multiple',
            width: 160,
            optionItems: [],
          },
          {
            key: 'shopIds',
            label: '选择店铺',
            value: ref(),
            type: 'select_multiple',
            width: 160,
            optionItems: [],
          },
          {
            key: 'ownerIds',
            label: '选择货主',
            value: ref(),
            type: 'select_multiple',
            width: 160,
            optionItems: [],
          },
          {
            type: 'input_keyword',
            key: 'skus',
            keyItems: [
              { label: 'SKU', value: 'skus' },
              { label: 'SPU', value: 'spus' },
              { label: 'MSKU', value: 'mskus' },
              { label: 'FNSKU', value: 'fnskus' },
              { label: '产品名称', value: 'productName' },
            ],
            keyWidth: '90',
            value: ref(),
            placeholder: '请输入',
            label: 'SKU',
            width: 180,
            isMultiple: true,
          },
          {
            type: 'cascader',
            key: 'cateId',
            optionItems: [],
            keyWidth: '120',
            value: ref(),
            placeholder: '请选择',
            label: '类目',
            width: 200,
            isMultiple: true,
          },
          {
            key: 'amtType',
            label: '库存数',
            value: ref(),
            type: 'select',
            width: 160,
            optionItems: [
              { label: '全部', value: '' },
              { label: '可用数>0', value: '1' },
              { label: '可用数=0', value: '0' },
              // { label: '不良品数>0', value: '3' },
              // { label: '不良品数=0', value: '4' },
            ],
          },
          {
            key: 'attribute',
            label: '库存属性',
            value: ref(),
            type: 'select',
            width: 160,
            optionItems: [
              { label: '全部', value: '' },
              { label: '良品', value: 'good' },
              { label: '次品', value: 'defective' },
            ],
          },
          {
            key: 'date',
            label: '日期',
            value: ref([`${dayjs().add(-1, 'month').format('YYYY-MM-DD')}`, `${dayjs().format('YYYY-MM-DD')}`]),
            type: 'date_range',
            width: 240,
            undeletable: true,
            attrs: {
              placeholder: ['开始日期', '结束日期'],
              defaultValue: [`${dayjs().add(-1, 'month').format('YYYY-MM-DD')} 00:00:00`, `${dayjs().format('YYYY-MM-DD')} 23:59:59`],
              'allow-clear': false,
            },
          },
        ],
        pageNation: { total: 0, pageSize: 20, pageNum: 1 },
        rowSelection: {
          type: 'checkbox',
          showCheckedAll: true,
        },
        rowSelectList: [],
        detailInfo: {},
        searchValue: {
          startDate: `${dayjs().add(-1, 'month').format('YYYY-MM-DD')} 00:00:00`,
          endDate: `${dayjs().format('YYYY-MM-DD')} 23:59:59`,
        },
      })
      const summary = (data: any) => {
        // console.log(data)
      }

      const searchByVal = (info: any) => {
        let obj = _.cloneDeep(info)
        data.searchValue = {}
        data.searchValue = info
        if (obj.date) {
          data.searchValue.startDate = `${obj['date'][0]} 00:00:00`
          data.searchValue.endDate = `${obj['date'][1]} 23:59:59`
        } else {
          data.searchValue.startDate = `${dayjs().add(-1, 'month').format('YYYY-MM-DD')} 00:00:00`
          data.searchValue.endDate = `${dayjs().format('YYYY-MM-DD')} 23:59:59`
        }
        delete data.searchValue.date
        data.pageNation.pageNum = 1
        getList()
      }

      const changePage = (val: number) => {
        data.pageNation.pageNum = val
        getList()
      }

      const sizeChange = (val: number) => {
        data.pageNation.pageNum = 1
        data.pageNation.pageSize = val
        getList()
      }

      const sortChange = (item: any, extra: any) => {
        if (extra) {
          data.searchValue.sortField = item
          data.searchValue.sortType = extra == 'ascend' ? '1' : '-1'
        } else {
          data.searchValue.sortField = ''
          data.searchValue.sortType = ''
        }
        getList()
      }

      const selectColumn = (val: any) => {
        data.rowSelectList = val
      }

      const getList = async (searchValue?: any) => {
        let params = {
          ...data.searchValue,
          pageNum: data.pageNation.pageNum,
          pageSize: data.pageNation.pageSize,
        }
        data.loading = true
        const res: any = await findInventoryIoSumPage(params)
        if (res.code == 'SUCCESS') {
          data.tableList = res.data.records
          data.pageNation.total = res.data.total
        }
        data.loading = false
      }
      const getWareHouseList = async () => {
        const res = await findWarehouseListByParam()
        let arr = res?.data
        arr.map((e: any) => {
          e.label = e.warehouseName
          e.value = e.warehouseCode
        })
        data.filterItem[0].optionItems = arr
      }

      const getShopListByShare = async () => {
        const res = await findShopListByShare()
        let arr = res?.data
        arr.map((e: any) => {
          e.label = e.shopName
          e.value = e.id
        })
        data.filterItem[1].optionItems = arr
      }
      // 获取人员
      const getUserList = async () => {
        let params = {
          depart: false,
          needRole: false,
          pageNum: 1,
          pageSize: 1000,
        }
        const res = await getOrganizesUser(params)
        let arr = res?.data?.records || []
        arr.map((e: any) => {
          e.label = e.userName
          e.value = e.id
        })
        data.filterItem[2].optionItems = arr
      }

      const getCategory = async () => {
        const res: any = await getCategoryList()
        data.filterItem[3].optionItems = res.data
      }
      const show = (info: any) => {
        data.detailInfo = info
        showDetail.value.visible = true
      }

      getWareHouseList()
      getShopListByShare()
      getCategory()
      getList()
      getUserList()
      return {
        ...(toRefs(data) as any),
        searchByVal,
        changePage,
        sizeChange,
        selectColumn,
        summary,
        sortChange,
        importInventory,
        setInventpryPrice,
        adjustSpace,
        showDetail,
        show,
        getList,
      }
    },
  })
</script>

<style lang="less" scoped></style>
